<template>
  <div class="navbar" :class="{ 'scrolled': isScrolled }">
    <div class="navbar-top">
      <div class="page-container">
        <div class="left-section">
          <Logo to="/" />
        </div>
        <div class="right-section">
          <div class="action-buttons">
            <a href="#" class="language-switcher">EN</a>
            <el-input
              class="search-input"
              placeholder="搜索"
              v-model="searchKeyword"
              @keyup.enter="handleSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
            <el-button type="primary" size="small" @click="handleLoginClick">管理入口</el-button>
          </div>
        </div>
      </div>
    </div>

    <div class="navbar-main">
      <div class="page-container main-container">
        <el-menu 
          :default-active="activeIndex" 
          class="main-menu" 
          mode="horizontal" 
          background-color="#163C7D" 
          text-color="#fff" 
          active-text-color="#fff"
          @select="handleSelect"
          :ellipsis="false"
        >
          <el-menu-item index="/">首页</el-menu-item>
          <el-sub-menu index="/about">
            <template #title>关于我们</template>
            <el-menu-item index="/about">公司简介</el-menu-item>
            <el-menu-item index="/about/history">发展历程</el-menu-item>
            <el-menu-item index="/about/team">管理团队</el-menu-item>
            <el-menu-item index="/about/organization">组织架构</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/news">
            <template #title>企业动态</template>
            <el-menu-item index="/news">新闻资讯</el-menu-item>
            <el-menu-item index="/news/media">媒体报道</el-menu-item>
            <el-menu-item index="/news/video">视频中心</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/boxs">
            <template #title>业务领域</template>
            <el-menu-item index="/boxs">业务概览</el-menu-item>
            <el-menu-item index="/boxs/services">主营业务</el-menu-item>
            <el-menu-item index="/boxs/projects">典型项目</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/product">
            <template #title>企业文化</template>
            <el-menu-item index="/product">核心价值观</el-menu-item>
            <el-menu-item index="/product/social">社会责任</el-menu-item>
            <el-menu-item index="/product/innovation">创新发展</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/recruits">人才招聘</el-menu-item>
          <el-menu-item index="/touch">联系我们</el-menu-item>
        </el-menu>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <div class="mobile-navbar">
      <div class="mobile-navbar-top">
        <div class="mobile-logo">
          <Logo to="/" />
        </div>
        <div class="mobile-actions">
          <el-icon class="icon-btn" @click="showSearch = !showSearch"><Search /></el-icon>
          <el-icon class="icon-btn" @click="toggleMobileMenu">
            <component :is="mobileMenuOpen ? Close : Menu" />
          </el-icon>
        </div>
      </div>
      
      <div class="mobile-search" v-if="showSearch">
        <el-input
          placeholder="搜索"
          v-model="searchKeyword"
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
      
      <div class="mobile-menu" v-if="mobileMenuOpen">
        <el-collapse accordion>
          <el-collapse-item title="首页" name="home">
            <router-link to="/" @click="toggleMobileMenu">首页</router-link>
          </el-collapse-item>
          <el-collapse-item title="关于我们" name="about">
            <router-link to="/about" @click="toggleMobileMenu">公司简介</router-link>
            <router-link to="/about/history" @click="toggleMobileMenu">发展历程</router-link>
            <router-link to="/about/team" @click="toggleMobileMenu">管理团队</router-link>
            <router-link to="/about/organization" @click="toggleMobileMenu">组织架构</router-link>
          </el-collapse-item>
          <el-collapse-item title="企业动态" name="news">
            <router-link to="/news" @click="toggleMobileMenu">新闻资讯</router-link>
            <router-link to="/news/media" @click="toggleMobileMenu">媒体报道</router-link>
            <router-link to="/news/video" @click="toggleMobileMenu">视频中心</router-link>
          </el-collapse-item>
          <el-collapse-item title="业务领域" name="business">
            <router-link to="/boxs" @click="toggleMobileMenu">业务概览</router-link>
            <router-link to="/boxs/services" @click="toggleMobileMenu">主营业务</router-link>
            <router-link to="/boxs/projects" @click="toggleMobileMenu">典型项目</router-link>
          </el-collapse-item>
          <el-collapse-item title="企业文化" name="culture">
            <router-link to="/product" @click="toggleMobileMenu">核心价值观</router-link>
            <router-link to="/product/social" @click="toggleMobileMenu">社会责任</router-link>
            <router-link to="/product/innovation" @click="toggleMobileMenu">创新发展</router-link>
          </el-collapse-item>
          <el-collapse-item title="人才招聘" name="jobs">
            <router-link to="/recruits" @click="toggleMobileMenu">人才招聘</router-link>
          </el-collapse-item>
          <el-collapse-item title="联系我们" name="contact">
            <router-link to="/touch" @click="toggleMobileMenu">联系我们</router-link>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router';
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import { Search, Menu, Close } from '@element-plus/icons-vue';
import Logo from './Logo.vue';

export default {
  name: 'Navbar',
  components: {
    Logo,
    Search,
    Menu,
    Close
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const isScrolled = ref(false);
    const mobileMenuOpen = ref(false);
    const showSearch = ref(false);
    const searchKeyword = ref('');
    
    // 计算当前活动菜单
    const activeIndex = computed(() => {
      return route.path;
    });

    // 处理滚动事件
    const handleScroll = () => {
      if (typeof window !== 'undefined') {
        isScrolled.value = window.scrollY > 50;
      }
    };

    // 切换移动端菜单
    const toggleMobileMenu = () => {
      mobileMenuOpen.value = !mobileMenuOpen.value;
      if (mobileMenuOpen.value) {
        showSearch.value = false;
      }
    };

    // 搜索处理
    const handleSearch = () => {
      if (searchKeyword.value && searchKeyword.value.trim()) {
        router.push({
          path: '/search',
          query: { keyword: searchKeyword.value }
        });
        searchKeyword.value = '';
        showSearch.value = false;
      }
    };

    // 菜单项点击
    const handleSelect = (index) => {
      if (index) {
        router.push(index);
      }
    };

    // 登录处理
    const handleLoginClick = () => {
      if (typeof window !== 'undefined') {
        window.location.href = "http://localhost:8080";
      }
    };

    // 路由变化时关闭移动菜单
    watch(() => route.path, () => {
      mobileMenuOpen.value = false;
      showSearch.value = false;
    });

    onMounted(() => {
      if (typeof window !== 'undefined') {
        window.addEventListener('scroll', handleScroll);
        handleScroll();
      }
    });

    onUnmounted(() => {
      if (typeof window !== 'undefined') {
        window.removeEventListener('scroll', handleScroll);
      }
    });

    return {
      activeIndex,
      isScrolled,
      mobileMenuOpen,
      showSearch,
      searchKeyword,
      toggleMobileMenu,
      handleSearch,
      handleSelect,
      handleLoginClick,
      Search,
      Menu,
      Close
    };
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: all 0.3s ease;
  
  .navbar-top {
    background-color: #fff;
    padding: 15px 0;
    
    .page-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .left-section {
      display: flex;
      align-items: center;
    }
    
    .right-section {
      display: flex;
      align-items: center;
      
      .action-buttons {
        display: flex;
        align-items: center;
        gap: 15px;
        
        .language-switcher {
          color: #333;
          font-weight: 500;
          text-decoration: none;
          
          &:hover {
            color: var(--primary-color);
          }
        }
        
        .search-input {
          width: 180px;
        }
      }
    }
  }
  
  .navbar-main {
    background-color: #163C7D;
    
    .main-container {
      display: flex;
      justify-content: space-between;
    }
    
    .main-menu {
      border-bottom: none;
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
    
    :deep(.el-menu-item) {
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      font-weight: 500;
      
      &.is-active {
        background-color: #072a68 !important;
        border-bottom: 3px solid #fff;
      }
      
      &:hover {
        background-color: #072a68 !important;
      }
    }
    
    :deep(.el-sub-menu__title) {
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      font-weight: 500;
      
      &:hover {
        background-color: #072a68 !important;
      }
    }
    
    :deep(.el-sub-menu__icon-arrow) {
      color: #fff;
    }
  }
  
  .mobile-navbar {
    display: none;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    
    .mobile-navbar-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
    }
    
    .mobile-actions {
      display: flex;
      align-items: center;
      gap: 20px;
      
      .icon-btn {
        font-size: 24px;
        cursor: pointer;
        color: #333;
      }
    }
    
    .mobile-search {
      padding: 0 15px 15px;
    }
    
    .mobile-menu {
      background-color: #f5f5f5;
    }
    
    :deep(.el-collapse-item__header) {
      padding: 0 15px;
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
    
    :deep(.el-collapse-item__content) {
      padding: 0;
      
      a {
        display: block;
        padding: 12px 30px;
        color: #666;
        text-decoration: none;
        border-bottom: 1px solid #eee;
        
        &:hover {
          color: var(--primary-color);
          background-color: #f0f0f0;
        }
      }
    }
  }
}

// 响应式调整
@media (max-width: 992px) {
  .navbar {
    .navbar-top, .navbar-main {
      display: none;
    }
    
    .mobile-navbar {
      display: block;
    }
  }
}
</style>